<template>
	<view>
		<scroll-view 
			id="tab-bar" 
			class="scroll-h" 
			:scroll-x="true" 
			:show-scrollbar="false" 
			:scroll-into-view="scrollInfo"
		>
		    <view 
				v-for="(tab,index) in list" 
				:class="tabIndex==index ? 'uni-tab-item-active' : ''" 
				:key="tab.id" class="uni-tab-item" 
				:id="tab.id" 
				:data-current="index" 
				@click="ontabtap"
			>
		        <text class="uni-tab-item-title" :class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>
		    </view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props:['list','tabIndex','scrollInfo'],
		data() {
			return {
				
			};
		},
		methods: {
			ontabtap(e){
				console.log(e);
			    let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.$emit('tabclick',index);
				console.log('下标选项卡', index);
				console.log('数据', this.list);
				console.log('上次选项卡', this.tabIndex);
				console.log('这个是什么', this.scrollInfo);
			},
		},
	}
</script>

<style scoped>
.scroll-h {
        width: 100%;
        height: 60upx;
        flex-direction: row;
		border-bottom: 1upx solid #F2F2F2;
		overflow: hidden;
		/* padding: 20upx; */
        /* #ifndef APP-PLUS */
        white-space: nowrap;
        /* #endif */
        /* flex-wrap: nowrap; */
        /* border-color: #cccccc;
		border-bottom-style: solid;
		border-bottom-width: 1px; */
    }
	.uni-tab-item {
	    /* #ifndef APP-PLUS */
	    display: inline-block;
	    /* #endif */
	    flex-wrap: nowrap;
	    /* padding-left: 34rpx; */
		margin-left: 32upx;
	    /* padding-right: 34rpx; */
		
		
	}
	
	.uni-tab-item-title {
	    color: #7B7B7B;
	    font-size: 28upx;
	    height: 60upx;
	    /* line-height: 60upx; */
		padding-bottom: 12upx;
	    flex-wrap: nowrap;
	    /* #ifndef APP-PLUS */
	    white-space: nowrap;
	    /* #endif */
	}
	.uni-tab-item-active{
		/* border-bottom:4upx solid #3277FA; */
	}
	.uni-tab-item-title-active {
		font-size:28upx;
		font-family:PingFangSC-Medium,PingFang SC;
		font-weight:500;
		color:rgba(34,34,34,1);
		border-bottom:2px solid #3277FA;
	}
</style>
